<template>
<div class="list" ref="wrapper" > 
  <div class="content"> 
    <div class="area">
      <div class="title border-topbottom">当前城市</div>
      <div class="button-list">
  	     <div class="button-wrapper">
  	       <div class="button" >
              <!--{{this.$store.state.city}}-->
              {{this.currentCity}}
           </div>
  	     </div>      
      </div>
    </div>
    <div class="area">
      <div class="title border-topbottom">热门城市</div>
       <div class="button-list">
         <div class="button-wrapper" v-for="item of hotlist" :key="item.id">
           <div class="button"  @click="handleClick(item.name)">{{item.name}}</div>
         </div>        
      </div>
    </div>
    <div class="area" v-for="(item,key) of allcities" :key="key" :ref="key">
      <div class="title border-topbottom">{{key}}</div>
      <div class="item-list">
          <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id"  @click="handleClick(innerItem.name)">{{innerItem.name}}</div>         
      </div>
    </div>   
  </div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapState ,mapMutations } from 'vuex'
export default {
  name: 'CityList',
  props:{
    hotlist:Array,
    allcities:Object,
    letter:String
  }, 
  computed: {
     ...mapState({currentCity:'city'})
  },
  mounted () {    
    this.scroll = new BScroll(this.$refs.wrapper)
    //const list = document.querySelector('.list')
    //const scroll = new BScroll(list)
  },
  watch: {
    letter () {
      console.log(this.letter)
      const element = this.$refs[this.letter][0]
      console.log(element)
      this.scroll.scrollToElement(element)
    }
  },
   methods:{
    handleClick(city){
    //  this.$store.dispatch('changeCity',city)
      this.changeCity(city)
      this.$router.replace('/')
    },
    ...mapMutations(['changeCity'])
  }
}

</script>
<style lang="stylus" scoped>
 @import '~@/assets/styles/varibles.styl'
 .border-topbottom
   &:before
     border-color:#ccc
   &:after
     border-color:#ccc
 .border-bottom
   &:before
     border-color:#ccc 
 .list
   overflow:hidden
   position:absolute
   top: 1.65rem
   height:6rem
   left: 0
   right: 0
   bottom:0 
   .title
     line-height:.66rem
     background:#eee
     padding-left:.2rem
     color:#666
     font-size:.26rem
   .button-list
     overflow:hidden
     padding:.1rem .6rem .1rem .1rem
     .button-wrapper
      float:left
      width:33.33%
      .button
        margin:.1rem
        padding:.1rem 0
        text-align:center
        border:.02rem solid #ccc
    .item-list
     .item
       line-height:2.1em 
       color:#666
       padding-left:.2rem

</style>
